<template>
  <div class="app-container">
    <el-card v-hasRole="['manager']" style="margin-top: 20px" shadow="hover">
      <div slot="header" class="clearfix">
        <span>消息中心</span>
      </div>
      <el-table v-loading="loading" :data="msg">
        <el-table-column label="序号" type="index" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="消息" align="center" prop="msg" />
      </el-table>
    </el-card>



    <el-card  style="margin-top: 20px;" shadow="hover">
      <div slot="header" class="clearfix">
        <span>维修任务</span>
      </div>

      <el-table v-loading="loading" :data="taskList">
        <el-table-column label="序号" type="index" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="任务编号"
          align="center"
          width="150"
          prop="taskCode"
        />

        <el-table-column
          label="任务详细"
          type="index"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <span
              >地点:{{ scope.row.address }} 损坏原因:{{
                scope.row.taskName
              }}
              发现时间:{{ scope.row.discoveryTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="整改前照片"
          align="center"
          prop="taskImage"
          width="100"
        >
          <template slot-scope="scope">
            <image-preview
              :src="scope.row.taskImage"
              :width="50"
              :height="50"
            />
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <!--
            关于维修任务完成后要不要保留数据，有两种方案
            1.删掉旧数据
            2.保留数据，但是修改状态

            这里选择保留数据，但是修改状态，因为如果删除数据，那么在未接取任务的时候，
            如果用户刷新页面，那么数据就丢失了，但是修改状态，那么用户刷新页面，
            可以查看到未接取的任务，但是无法接取，但是可以不接取，这样用户体验更好。
            
            v-if  
          
          -->
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="handleUpdate(scope.row)"
              v-if="scope.row.taskStatus == 0"
              >接取</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-close"
              @click="handleDelete(scope.row)"
              v-if="scope.row.taskStatus == 0"
              >不接取</el-button
            >
            <!-- 上传整改照片 -->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="openupload(scope.row)"
              v-if="scope.row.taskStatus == 1"
              >上传整改照片</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-row>
        <el-col>

        </el-col>

    </el-row> -->
    </el-card>

    <el-dialog
      title="上传整改照片"
      :visible.sync="upload"
      width="700px"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="任务名称" prop="taskName">
          <el-input
            v-model="form.taskName"
            placeholder="请输入任务名称"
            disabled
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input
            v-model="form.address"
            type="textarea"
            placeholder="请输入内容"
            disabled
          />
        </el-form-item>
        <el-form-item label="发现时间" prop="discoveryTime">
          <el-date-picker
            clearable
            v-model="form.discoveryTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择发现时间"
            disabled
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="整改前照片" prop="taskImage">
          <image-upload v-model="form.taskImage" />
        </el-form-item>

        <!-- 添加权限 -->

        <el-form-item
          v-if="form.taskStatus == 1 || form.taskStatus == 2"
          label="整改时间"
          prop="rectificationTime"
        >
          <el-date-picker
            clearable
            v-model="form.rectificationTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择整改时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          v-if="form.taskStatus == 1 || form.taskStatus == 2"
          label="整改后照片"
          prop="rectificationImage"
        >
          <image-upload v-model="form.rectificationImage" />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTask,
  updateRepair,
  delTask,
  getRepair,
  getMsgByAdmin,
} from "@/api/business/repair";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 任务集合
      taskList: [],
      // 上传弹窗
      upload: false,
      // 表单参数
      form: {},
      // 消息
      msg: [],
    };
  },
  mounted() {
    this.getTaskList();
  },
  methods: {
    // 获取任务列表
    getTaskList() {
      this.loading = true;

      // 验证用户是否含有指定角色，只需包含其中一个

      // console.log("管理员：",  this.$auth.hasRoleOr(["admin", "manager"]));

      if (this.$auth.hasRoleOr(["admin", "manager"])) {
        // 管理员端
        getMsgByAdmin().then((response) => {
          // console.log("response:", response);
          this.msg = response.data;
          console.log("msg:", this.msg);
          this.loading = false;
        });
      }

      // 员工端
      getTask().then((response) => {
        // console.log("response:", response);
        this.taskList = response.data;
        console.log("taskList:", this.taskList);
        this.loading = false;
      });

      // 调用管理员的消息获取结果接口
    },
    // 接取任务
    handleUpdate(row) {
      const id = row.id;
      let data = {
        id: id,
        taskStatus: 1,
      };
      this.$modal.msgSuccess("接取成功！"),
        updateRepair(data).then((response) => {
          console.log("response:", response);
        });
        this.getTaskList();

    },
    // 不接取任务
    handleDelete(row) {
      // 可以的话，做个对发布人的响应信息  “对方未接取任务”
      // 其实可以做，发布人检查，对方信箱中是否还有那个任务的id
      // ok啊，也是想到了

      const id = row.id;
      // 删除redis中该用户的维修任务记录
      delTask(id).then((response) => {
        console.log("response:", response);
        this.$message.msgSuccess("删除成功！");
      });
      this.getTaskList();
    },
    UpdatePhotoTwice(row) {
      // 上传整改照片
    },
    // 打开上传页面
    openupload(row) {
      this.upload = true;
      let id = row.id;
      getRepair(id).then((response) => {
        this.form = response.data;
      });
    },
  },
};
// 获取维修任务
</script>

<style scoped></style>
